<%@page import="com.lyf.util.DateUtil"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
	<title>CRM-contact-show</title>
	<meta charset="UTF-8">
	<%@ include file="../include/head.jsp" %>
	<!-- 
	<script type="text/javascript" src="${basePath }/js/map/gmaps.js"></script>
	<script type="text/javascript" src="${basePath }/js/map/httpmaps.js"></script>
	 -->
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<script type="text/javascript" src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>
</head>

<body class="crm">
	
<jsp:include page="../include/top.jsp">
	<jsp:param value="contact" name="tag"/>
</jsp:include>


<div class="container-fluid">
	<div class="row-fluid">
		<div class="row-fluid">
		<div class="span8">
			<div class="well screen">
			<div class="page-header header">

					

			<table style="width:100%;">
			<tbody>
				<tr>
					<td style="vertical-align:top;" width="68">
						<div class="contact-avatar-container" data="" data-id="800148">
							<span style="display: inline-block;border:1px solid #CCCCCC;background: url('/mecrm/img/workxp_sprites.png') no-repeat -112px 0px transparent; width: 55px; padding-top: 55px;font-size:1px"></span>
						</div>
					</td>
					<td>
						<div class="right-links">由 <strong>${contact.user.username }</strong> 添加 |
							<a data-original-title="修改联系人" href="${basePath }/contact/edit?id=${contact.id}" rel="tooltip"><i class="icon icon-edit"></i></a>
						</div>
						${contact.name }
					</td>
				</tr>
			</tbody>
			</table>

		    <ul class="nav nav-tabs details-tab">
		      <li class="active">
		        <a href="#notes" data-toggle="tab">事件 &amp; 邮件</a>
		      </li>
		      
		      <li class=""><a href="#chances" data-toggle="tab">
		       	 业务机会 
		      </a></li>
		      <li class="">
		        <a href="#dates" data-toggle="tab">重要日期</a>
		      </li>
			 </ul>

			</div>
			<div class="live_search_spinner" behavior="spinner" id="parties_loading">
			  <div class="liner">
			    <h3>处理中...</h3>
			    <img src="${basePath }/img/indicator.gif" alt="WorkXP">
			  </div>
			</div>
			<div class="main" id="main">

			<div class="tab-content">
			  <div class="tab-pane active" id="notes">
			  <div>
				<!-- 
				<form accept-charset="UTF-8" action="${basePath }/contactnote/add" class="simple_form new_note" data-remote="true" id="note-form" method="post" novalidate="novalidate">
				 -->
					<div style="margin:0;padding:0;display:inline"><input name="utf8" value="✓" type="hidden"><input name="authenticity_token" value="zDx+XYmK9shSsGdc6gvJlqcaEqEW/RnfsnCbuYNCB4Q=" type="hidden"></div>
					<input id="from" name="from" value="Contact" type="hidden">
					<input id="note_parent_id" name="note[parent_id]" type="hidden">
					<input id="note_contact_id" name="id" value="${contact.id }" type="hidden">
					<input id="note_chance_id" name="note[chance_id]" type="hidden">
					<input id="note_kase_id" name="note[kase_id]" type="hidden">
					
					<div class="control-group text required">
						<div class="controls">
							<textarea class="text required content" cols="40" id="note_content" name="contactnote.content" rows="20"></textarea>
						</div>
					</div>
					
				
			
					<div class="new_note_form_basics">
						<div class="submit right">
							<input class="btn btn-primary" data-loading-text="处理中.." id="commonent-save" name="commit-first" value="保存" type="submit">
						</div>
						
					</div>
				<!-- </form> -->
			</div>
			
			<script type="text/javascript" charset="utf-8">
				
				// auto_size_textarea('holder_', 'note_content_');  
				$(document).ready(function() {
					validate_form('#note-form', true);
					PendingAttachments.init(".attachment_container");
					// $('#note_content').focus()
					
				});
			</script>


			 

			<table id="activities" class="table crm-table top no-hover" style="margin-bottom: 60px">
			<tbody>
			<tr id="commonent"></tr>
			<c:forEach items="${noteList }" var="contactnote">
			<tr id="note-${contactnote.id }" data="${contactnote.id }" data-from="Contact" class="note">
				<td class="icon"><span class="sprite note"></span></td>
				<td>
					<div class="note-header">
						<div style="float:right">
							 <ul class="nav nav-pills">
						 		<li>
						 			<a data-method="comment" rel="${contactnote.id }" href="javascript:;">»评论</a>
						 		</li>
						 			
								<li><a href="${basePath }/contactnote/editcomment?id=${contactnote.id}" title="编辑">编辑</a></li>
					 			<li>
									<a href="javascript:;" id="${contactnote.id }" data-confirm="" data-method="delete" data-remote="true" rel="nofollow" title="删除">删除</a>
								</li>
							 </ul>
						</div>
						
						<div class="subject">
							<c:set var="time" value="${contactnote.createtime }"></c:set>
							<%
								String time = (String)pageContext.getAttribute("time");
								time = DateUtil.getAskedTime(time);
								pageContext.setAttribute("time",time);
							%>
							<span class="label label-warning">${time }</span>
						</div>
						<div class="meta">
							${contactnote.user.username } 添加
						</div>
						<div class="meta">
						</div>
					</div>
					<div class="content">
						<p>${contactnote.content }</p>
					</div>
					
					
					<div class="well" style="padding:0px 0px;display:none;" id="show-${contactnote.id }">
						
						<input type="hidden" name="contactid" value="${contactnote.contact.id }"/>
						
						<table class="table" style="margin-bottom:0px;">
						
							<tr id="comment-show-${contactnote.id }"></tr>
							<c:forEach items="${contactnote.commentList }" var="comment">
							<tr id="note-${comment.id }" class="comment">
								<td class="icon">
									<span style="display: inline-block;border:1px solid #CCCCCC;background: url('/mecrm/img/workxp_sprites.png') no-repeat -112px -148px transparent; width: 32px; padding-top: 32px;font-size:1px"></span>
								</td>
								<td>
									<div class="meta">
										<div class="float-right">
											<c:set value="${comment.createtime }" var="time2"></c:set>
											<%
												String time2 = (String)pageContext.getAttribute("time2");
												time2 = DateUtil.getAskedTime(time2);
												pageContext.setAttribute("time2",time2);
											%>
											<span class="label label-warning">${time2 }</span>
										</div>
										<strong>${comment.user.username }</strong>
										·
										<a class="icon icon-trash" rel="tooltip nofollow" id="${comment.id }" data-remote="true" data-method="comment-delete"  href="javascript:;" data-original-title="删除这个评论"></a>
									</div>
									<div class="content">
										<p>${comment.content }</p>
									</div>
								</td>
							</tr>
							</c:forEach>
							<tr>
								<td colspan="3" style="border-bottom: 0px solid gray">
									<textarea id="note_content_${contactnote.id }" class="text required" rows="20" placeholder="添加评论" name="comment-note" cols="40" style="height: 20px;width: 98%;"></textarea>
									<div class="submit pull-right">
										<input class="btn" type="submit" value="添加评论" id="${contactnote.id }" name="commit" data-loading-text="处理中.." style="display:none;">
									</div>
								</td>
							</tr>
							
						</table>
					</div>
				</td>
			</tr>
			</c:forEach>
			
			</tbody></table>
			
			<!-- 评论的评论 -->
			<script type="text/javascript">
				$(document).ready(function(){
					var count = 0;
					$("a[data-method='comment']").click(function(){
						var id = $(this).attr("rel");
						if(count == 0){
							$("#show-"+id).show();
							count++;
						}else{
							$("#show-"+id).hide();
							count--;
						}
					});
					
					//添加
					$("input[name='commit']").click(function(){
						var fid = $(this).attr("id");
						var id = $("input[name='contactid']").val();
						var note = $("#note_content_"+fid).val().trim();
						if(note != ""){
							$.post("${basePath}/contactnote/add",{"fid":fid,"id":id,"contactnote.content":note},function(obj){
								var content = "";
								var id2 = obj.fid;
								content +="<tr id=\"note-"+obj.id+"\" class=\"comment\">"+
									"<td class=\"icon\"><span style=\"display: inline-block;border:1px solid #CCCCCC;background: url('/mecrm/img/workxp_sprites.png') no-repeat -112px -148px transparent; width: 32px; padding-top: 32px;font-size:1px\"></span>"+
									"</td><td><div class=\"meta\"><div class=\"float-right\"><span class=\"label label-warning\">"+obj.createtime+"</span></div><strong>"+obj.user.username+"</strong>·&nbsp;&nbsp;"+
									"<a id=\""+obj.id+"\" class=\"icon icon-trash\" rel=\"tooltip nofollow\" data-remote=\"true\" data-method=\"comment-delete-"+obj.id+"\" href=\"javascript:;\" data-original-title=\"删除这个评论\"></a></div><div class=\"content\">"+
									"<p>"+obj.content+"</p></div></td></tr>";
								
								$("#comment-show-"+obj.fid).after(content);
								$("#note_content_"+fid).attr("value"," ");
								$("input[name='commit']").hide();
								$("textarea[name='comment-note']").attr("style","height:20px;width: 98%;");
								
								//delete
								$("a[data-method='comment-delete-"+obj.id+"']").click(function(){
									if(confirm("确定要删除这个评论吗？")){
										var id = $(this).attr("id");
										$.post("${basePath}/contactnote/del",{"id":id},function(){
											$("#note-"+id).fadeOut();
										});
									}
								});
								
							});
						}else{
							alert("评论replay不能为空...");
						}
					});
					
					//delete
					
					$("a[data-method='comment-delete']").click(function(){
						var id = $(this).attr("id");
						if(id != " "){
							if(confirm("确定要删除这个评论吗？")){
								$.post("${basePath}/contactnote/del",{"id":id},function(){
									$("#note-"+id).fadeOut();
								});
							}
						}
					});
					
					//btn
					$("textarea[name='comment-note']").focus(function(){
						$("input[name='commit']").show();
					});
					$("textarea[name='comment-note']").keyup(function(){
						$(this).attr("style","height:40px;width: 98%;");
						if($(this).val().trim() == ""){
							$(this).attr("style","height:20px;width: 98%;");
						}
					});
					
				});
			</script>
			
			
			<!-- 评论 -->	
			<script type="text/javascript">
				$(document).ready(function(){
					$("#commonent-save").click(function(){
						var contactid = $("#note_contact_id").val();
						var content = $("#note_content").val().trim();
						var btn = $(this);
						if(content != ""){
							btn.button("loading");
							$.post("${basePath }/contactnote/add",{"id":contactid,"contactnote.content":content},function(obj){
								if(obj.id != ""){
									$("#commonent").after("<tr id='note-"+obj.id+"' data='"+obj.id+"' data-from='Contact' class='note'>"+
									"<td class='icon'><span class='sprite note'></span></td><td><div class='note-header'><div style='float:right'>"+ "<ul class='nav nav-pills'>"+"<li><a data-method='comment' id=\"comment2-"+obj.id+"\" rel='"+obj.id+"' href='javascript:;'>»评论</a></li>"+"<li><a href='${basePath}/contactnote/edit?id="+obj.id+"' title='编辑'>编辑</a></li><li>"+"<a href='javascript:;' id='"+obj.id+"' data-confirm='' data-method='delete' data-remote='true' rel='nofollow' title='删除'>删除</a>"+
									"</li></ul></div><div class='subject'>"+"<span class='label label-warning'>"+obj.createtime+"</span>"+"</div><div class='meta'>"+obj.user.username+"添加</div><div class='meta'></div></div><div class='content'>"+"<p>"+obj.content+"</p></div></td></tr><div id='comment-show-"+obj.id+"'></div>");
									
									btn.button("reset");
									$("#note_content").attr("value","");
									
									$("#"+obj.id).click(function(){
										var id = $(obj).attr("id");
										if(confirm("如果事件有评论，所有评论都会一并删除。 \n\t您确定要删除这个事件吗？")){
											$.post("${basePath}/contactnote/del",{"id":id},function(){
												$("#note-"+id).fadeOut();
											});
										}
									});
									var count = 0;
									$("#comment2-"+obj.id).click(function(){
										var id = $(this).attr("rel");
										if(count == 0){
											$("#show-"+obj.id).show();
											count++;
										}else{
											$("#show-"+obj.id).hide();
											count--;
										}
									});
								}else{
									btn.button("reset");
									$("#note_content").focus();
								}
							});
						}else{
							alert("事件不能为空");
						}
					});
					$("a[data-confirm='']").click(function(){
						var id = $(this).attr("id");
						if(confirm("如果事件有评论，所有评论都会一并删除。 \n\t您确定要删除这个事件吗？")){
							$.post("${basePath}/contactnote/del",{"id":id},function(){
								$("#note-"+id).fadeOut();
							});
						}
					});
					
				});
			</script>	
	
	

			<style>
			.meta {
				line-height: 26px;
			}
			.meta li span {
				padding: 4px 8px;
				font-weight:blod;
			}
			.meta	.nav-pills li a {
			  padding: 4px 8px;
			}
			.meta .nav {
				margin-bottom: 0px;
			}
			</style>
			<script>
				$(document).ready(function() {
					bind_regarding_event();
				});
			</script>
			  </div>
			 
			  <div class="tab-pane" id="chances">
			    <table class="table table-striped crm-table" id="chances">
			</table>
			
			<a href="${basePath }/deal/new?contact_id=${contact.id}" class="btn btn-primary">添加机会</a>
			  </div>
			  <div class="tab-pane" id="dates">
			    	<div class="alert alert-info">
					<button class="close" data-dismiss="alert" type="button">×</button>
					<strong>日期提醒</strong>
					您可以为'IT'增加一个日期，比如生日、第一次见面时间等，WorkXP会在前一周发邮件提醒您，让您不会忘记客户的重要日期。当然也可以设置由谁来负责，负责人会在前一周收到邮件提醒。
				</div>
			
			<table class="table table-striped crm-table" id="contact_dates">
				
			</table>
			
			<a data-toggle="modal" href="#dateModal" class="btn">
				<li class="icon-calendar"></li>
				添加一个日期
			</a>
			  </div>
			</div>



			<script type="text/javascript" charset="utf-8">
				$(document).ready(function() {
					if(!$('#contact_date_occasion').val()) $('#contact_date_description').show();
					if($('#contact_date_assign_task').attr('checked')) $('#task-owner-field').show();
				});
			</script>
			
			
			</div>
		</div>
		</div>
		<div class="span4 sidebar">
			<div id="tasks_div" class="well">
				<div class="title">
						<span><a data-toggle="modal" href="#taskModal" data-backdrop="static">添加任务</a></span>
					待办任务
				</div>
				<div id="upcoming_tasks">
					<div id="screen_body"></div>
				</div>
			</div>
			
			<div class="well">
			  	<div class="title">
					<span>
						<a href="${basePath }/contact/edit?id=${contact.id}">编辑</a>
						<a style="margin-left:5px" href="/people/800174.vcf">vCard</a>
					</span>
				联系信息
				</div>
				<ul class="nav nav-list contacts">
					<li class="pull-right">
						<img alt="qrcode" src="${basePath }/img/QRCode/${contact.qrcode }.png" height="150px" width="150px;"/>
					</li>
					
					<li class="nav-header">电话</li>
					<li>
						<c:forEach items="${contact.telList }" var="tel">${tel.tel }
							<c:choose>
								<c:when test="${tel.type == 'office' }">
								<span>公司</span><br>
								</c:when>
								<c:when test="${tel.type == 'work' }">
									<span>工作</span><br>
								</c:when>
								<c:when test="${tel.type == 'mobile' }">
									<span>手机</span><br>
								</c:when>
								<c:when test="${tel.type == 'fax' }">
									<span>传真</span><br>
								</c:when>
								<c:when test="${tel.type == 'home' }">
									<span>住宅</span><br>
								</c:when>
								<c:when test="${tel.type == 'other' }">
									<span>其他</span><br>
								</c:when>
							</c:choose>
						</c:forEach>
					</li>
					<li class="nav-header">邮箱</li>
					<li>
					<c:forEach items="${contact.mailList }" var="mail">
						<a href="mailto:${mail.mail }">${mail.mail }</a>
						<c:choose>
							<c:when test="${mail.type == 'work' }">
								<span>工作</span><br>
							</c:when>
							<c:when test="${mail.type == 'personal' }">
								<span>个人</span><br>
							</c:when>
							<c:when test="${mail.type == 'other' }">
								<span>其他</span><br>
							</c:when>
						</c:choose>
							
					</c:forEach>
					</li>
				
					<li class="nav-header">个人账号</li>
					<li>
					<c:forEach items="${contact.imList }" var="im">${im.im }
						<c:choose>
							<c:when test="${im.type == 'qq' }">
								<span>QQ</span><br>
							</c:when>
							<c:when test="${im.type == 'gtalk' }">
								<span>GTalk</span><br>
							</c:when>
							<c:when test="${im.type == 'msn' }">
								<span>MSN</span><br>
							</c:when>
							<c:when test="${im.type == 'other' }">
								<span>其他</span><br>
							</c:when>
						</c:choose>
					</c:forEach>
					</li>
					<li class="nav-header">网址</li>
					<li>
						<c:forEach items="${contact.websiteList }" var="website">${website.website }
						<c:choose>
							<c:when test="${website.type == 'office' }">
								<span>公司</span><br>
							</c:when>
							<c:when test="${website.type == 'personal' }">
								<span>个人</span><br>
							</c:when>
							<c:when test="${website.type == 'other' }">
								<span>其他</span><br>
							</c:when>
						</c:choose>
						</c:forEach>
					</li>
					<li class="nav-header">地址</li>
					<li>
					${contact.address }
					</li>
				</ul>
			</div>
			<div class="well">
			 	<div id="background_container">
					<div class="title">
			  		<span><a href="#" onclick="toggle_edit_background_info(true); return false;">编辑</a></span>
			  		背景信息
			  	</div>
			  	<div id="background_info"><p>${contact.content }</p></div>
				</div>
			
			  <div id="edit_background_container" style="display:none;">
			  	<!-- <form novalidate="novalidate" accept-charset="UTF-8" action="${basePath }/contact/editDes" data-remote="true" id="background_form" method="post"> -->
			  		<div style="margin:0;padding:0;display:inline"><input name="utf8" value="✓" type="hidden"><input name="authenticity_token" value="zDx+XYmK9shSsGdc6gvJlqcaEqEW/RnfsnCbuYNCB4Q=" type="hidden"></div>
					
					<input id="target_type" name="${contact.id }" value="" type="hidden">
					<div class="control-group text optional">
						<label for="contact_others" class="text optional control-label"> 修改背景信息</label>
						<div class="controls">
							<textarea class="content" id="description" name="desc" required="required">${contact.content }</textarea>
						</div>
					</div>
			  		<div class="submit">
			  			<input class="btn btn-primary" name="commit2" value="保存" type="submit" id="edit-content" data-loading-text="Loading...">
						<a class="btn" href="#" onclick="toggle_edit_background_info(); return false;">取消</a>
			  		</div>
				<!-- </form>  -->  
			</div>
			</div>
			<script type="text/javascript">
				$(document).ready(function(){
					$("#edit-content").click(function(){
						var des = $("#description");
						
						var btn = $(this);
						btn.button("loading");
						setTimeout(function () {
							btn.button("reset");
						}, 500);
						if(des.val().trim() != null){
							$.post("${basePath}/contact/editDes",{"desc":des.val().trim(),"id":$("#target_type").attr("name")},function(obj){
								$("#background_info").text(obj);
								$('#background_container').slideDown("slow");
								$('#edit_background_container').slideUp("slow");
								
							});
						}
					});
				});
			</script>
		
		
			<script type="text/javascript" charset="utf-8">
				$(document).ready(function() {
					validate_form("#background_form", true);
				});
				function toggle_edit_background_info(edit) {
					$('#background_container').slideToggle();
					$('#edit_background_container').slideToggle();
					if (edit) $('#description').focus();
				}
			</script>
			<div class="well" style="height:300px;">
				<div class="title">Map</div>
					<input id="address" value="${contact.address }" type="hidden"/>
					<div id="map" style="width:340px;height:250px">
				<div class="alert alert-success"></div>
			</div>
		
		</div>
	</div>
</div>
	
</div>
</div>

<script type="text/javascript">
var map;
$(document).ready(function(){
	
	map = new GMaps({
			div: '#map',
			lat: 35.2193612,
			lng: 113.2482923 
	});
	
	$("#btn").click(function(){
		GMaps.geocode({
		  address: $('#address').val(),
		  callback: function(results, status) {
			if (status == 'OK') {
			  var latlng = results[0].geometry.location;
			  map.setCenter(latlng.lat(), latlng.lng());
			  map.addMarker({
				lat: latlng.lat(),
				lng: latlng.lng()
			  });
			}
		  }
		});
	});
	
});
</script>
</body></html>
